<template>
	<view class="my">
		<view class="my-top">
			<view class="my-top-t">
				<image class="my-top-t-l" src="../../static/avatar.jpg" mode="aspectFill"></image>
				<view class="my-top-t-r">请点击授权</view>
			</view>
			<view class="my-top-b">
				<navigator url="/pages/my/favorite" class="my-top-b-item" hover-class="none">
					<text>10</text>
					<view>我的收藏</view>
				</navigator>
				<navigator url="/pages/my/footprint" class="my-top-b-item" hover-class="none">
					<text>{{footStore.footLength}}</text>
					<view>浏览记录</view>
				</navigator>
			</view>
		</view>
		<view class="my-fast">
			<navigator url="/pages/my/myorders?ind=0" hover-class="none" class="my-fast-t">
				<view class="my-fast-t-l">我的订单</view>
				<view class="my-fast-t-r">
					<text>全部订单</text>
					<uni-icons type="right" size="14" color="#999999"></uni-icons>
				</view>
			</navigator>
			<view class="my-fast-b">
				<navigator url="/pages/my/myorders?ind=1" hover-class="none" class="my-fast-item">
					<image src="../../static/o01.png" mode="aspectFit"></image>
					<view>待付款</view>
				</navigator>
				<navigator url="/pages/my/myorders?ind=2" hover-class="none" class="my-fast-item">
					<image src="../../static/o02.png" mode="aspectFit"></image>
					<view>待发货</view>
				</navigator>
				<navigator url="/pages/my/myorders?ind=3" hover-class="none" class="my-fast-item">
					<image src="../../static/o03.png" mode="aspectFit"></image>
					<view>待收货</view>
				</navigator>
				<navigator url="/pages/my/myorders?ind=4" hover-class="none" class="my-fast-item">
					<image src="../../static/o04.png" mode="aspectFit"></image>
					<view>售后/退款</view>
				</navigator>
			</view>
		</view>
		<view class="my-navs">
			<navigator url="/pages/my/favorite" hover-class="none" class="my-navs-item">
				<view class="my-navs-l">
					<image src="../../static/f01.png" mode="aspectFit"></image>
					<text>我的收藏</text>
				</view>
				<uni-icons type="right" size="14" color="#e7e7e7"></uni-icons>
			</navigator>
			<navigator url="/pages/my/footprint" hover-class="none" class="my-navs-item">
				<view class="my-navs-l">
					<image src="../../static/f02.png" mode="aspectFit"></image>
					<text>浏览记录</text>
				</view>
				<uni-icons type="right" size="14" color="#e7e7e7"></uni-icons>
			</navigator>
			<navigator url="/pages/my/isqual" hover-class="none" class="my-navs-item">
				<view class="my-navs-l">
					<image src="../../static/f03.png" mode="aspectFit"></image>
					<text>我的资质</text>
				</view>
				<uni-icons type="right" size="14" color="#e7e7e7"></uni-icons>
			</navigator>
			<navigator url="/pages/my/single" hover-class="none" class="my-navs-item">
				<view class="my-navs-l">
					<image src="../../static/f04.png" mode="aspectFit"></image>
					<text>关于我们</text>
				</view>
				<uni-icons type="right" size="14" color="#e7e7e7"></uni-icons>
			</navigator>
			<button open-type="contact" class="my-navs-item">
				<view class="my-navs-l">
					<image src="../../static/f05.png" mode="aspectFit"></image>
					<text>平台客服</text>
				</view>
				<uni-icons type="right" size="14" color="#e7e7e7"></uni-icons>
			</button>
		</view>
	</view>
</template>

<script setup>
	import {
		useFootmarkStore
	} from '@/store/footmark'
	const footStore = useFootmarkStore()
	footStore.initFoot();
</script>

<style lang="scss">
	page {
		background: #f3f3f3;
	}

	.my {
		&-top {
			background: $main-color;

			&-t {
				padding: 40rpx 80rpx;
				display: flex;
				align-items: center;

				&-l {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}

				&-r {
					font-size: 36rpx;
					color: $cf;
					margin-left: 20rpx;
				}
			}

			&-b {
				display: flex;
				justify-content: space-between;
				border-top: 1px solid #26a24a;

				&-item {
					width: 50%;
					text-align: center;
					padding: 20rpx 0;

					&:first-child {
						border-right: 1px solid #26a24a;
					}

					text {
						font-size: 30rpx;
						color: $cf;
					}

					view {
						font-size: 26rpx;
						color: $cf;
					}
				}
			}
		}

		&-fast {
			background: $cf;
			margin-bottom: 10rpx;

			&-t {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 30rpx;

				&-l {
					font-size: 30rpx;
					color: $c0;
				}

				&-r {
					font-size: 24rpx;
					color: $c9;
				}
			}

			&-b {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0;
			}

			&-item {
				width: 25%;
				text-align: center;

				image {
					display: block;
					width: 50rpx;
					height: 50rpx;
					margin: auto;
				}

				view {
					font-size: 26rpx;
					color: $c3;
					margin-top: 10rpx;
				}
			}
		}

		&-navs {
			background: $cf;
			padding: 20rpx;

			&-item {
				border: none;
				border-bottom: 1px solid #efefef;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 10rpx;
				background: none;
				line-height: normal;
				border-radius: 0;

				&::after {
					display: none;
				}
			}

			&-l {
				display: flex;
				align-items: center;

				image {
					width: 42rpx;
					height: 42rpx;
					margin-right: 20rpx;
				}

				text {
					font-size: 30rpx;
					color: $c0;
				}
			}

			&-r {}
		}
	}
</style>